<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">{{$t('back')}}</block>
			<block slot="content"><text class="text-black text-bold">联系人</text></block>
		</cu-custom>


		<view class="cu-form-group margin-top">
			<view class="content">
				<text @click="titleClick(index)" :class="index==titlelist.length-2?'text-blue':'text-gray'" v-for="(title,index) in titlelist">
					{{title.name}}
					<text v-show="titlelist.length>1 && index<titlelist.length-1" class="cuIcon-right"></text>
				</text>
			</view>
		</view>

		<view class="cu-form-group margin-top">
			<view class="content">
				<label class="radio" @click="selectAll">
					<checkbox :checked="isSelectAll" class="round blue" :class="isSelectAll?'checked':''" value="all" />
				</label>
				<text class="text-grey padding-left">全选</text>
			</view>
		</view>

		<form @submit="submit">
			<checkbox-group name="selectdepart" @change="chengeDepart" class="cu-list menu sm-border margin-top">
				<view class="cu-item" v-for="(depart,index) in departmentlist">
					<label class="content radio">
						<checkbox class="round blue" :class="depart.clicked?'checked':''" :checked="depart.clicked" :value="depart.departid" />
						<text class="text-grey padding-left">{{depart.departname}}({{depart.employeelist.length}}人)</text>
					</label>
					<view class="action border-left">
						<button :disabled="depart.clicked" class="cuIcon-list bg-white text-blue" @tap="nextDepart(index)">下级</button>
					</view>
				</view>
			</checkbox-group>


			<checkbox-group name="selectemployee" @change="chengeEmployee" class="cu-list menu sm-border margin-top">
				<view class="cu-item" v-for="(employee,index) in employeelist">
					<view class="round sm bg-blue"></view>
					<label class="content radio">
						<checkbox class="round blue" :class="employee.clicked?'checked':''" :checked="employee.clicked" :value="employee.userid" />
						<text class="text-grey padding-left">{{employee.username}}</text>
					</label>
				</view>
			</checkbox-group>

			<view class="bottom-float cu-bar bg-white solid-top">
				<text class="action text-blue text-sm">
					{{setlectTip}}
				</text>
				<view class="action">
					<button form-type="submit" class="cu-btn bg-blue shadow">确定</button>
				</view>
			</view>
		</form>

	</view>
</template>

<script>
	let _self = null
	export default {
		data() {
			return {
				isSelectAll: false,
				setlectTip: '请选择',
				titlelist: [{
					name: '通讯录'
				}],
				employeelist: [],
				departmentlist: []
			}
		},
		onLoad(data) {
			// console.log(data)
			_self = this
			_self.initData()
		},
		methods: {
			initData() {
				let testDepartData = [{
							departname: '研发部',
							clicked: false,
							departid: '0001',
							childDepartment: [{
								departname: '研发一部',
								clicked: false,
								departid: '0001',
								childDepartment: [],
								employeelist: [{
										username: '张三',
										userimg: '',
										userid: '00da01',
										clicked: false
									},
									{
										username: '李四',
										userimg: '',
										userid: '00da02',
										clicked: false
									},
									{
										username: '王二',
										userimg: '',
										userid: '00da04',
										clicked: false
									}
								]
							}],
							employeelist: [{
									username: '张三',
									userimg: '',
									userid: '00da01',
									clicked: false
								},
								{
									username: '李四',
									userimg: '',
									userid: '00da02',
									clicked: false
								},
								{
									username: '王二',
									userimg: '',
									userid: '00da04',
									clicked: false
								}
							]
						},
						{
							departname: '人事部',
							departid: '0002',
							clicked: false,
							childDepartment: [],
							employeelist: [{
									username: '张三',
									userimg: '',
									userid: '00da01',
									clicked: false
								},
								{
									username: '李四',
									userimg: '',
									userid: '00da02',
									clicked: false
								},
								{
									username: '王二',
									userimg: '',
									userid: '00da04',
									clicked: false
								}
							]
						},
						{
							departname: '行政部',
							departid: '0003',
							clicked: false,
							childDepartment: [],
							employeelist: [{
									username: '张三',
									userimg: '',
									userid: '00da01',
									clicked: false
								},
								{
									username: '李四',
									userimg: '',
									userid: '00da02',
									clicked: false
								},
								{
									username: '王二',
									userimg: '',
									userid: '00da04',
									clicked: false
								}
							]
						}
					]
					testDepartData.forEach(function(item){
						_self.departmentlist.push(item)
					})
					// console.log(_self.departmentlist)
			},
			chengeDepart(e) {
				let checklist = e.detail.value
				// console.log(checklist)
				_self.setlectTip = '已选择' + checklist.length + '个部门'
				_self.departmentlist.forEach(function(item) {
					var index = checklist.indexOf(item.departid)
					if (index < 0) {
						item.clicked = false
					} else {
						item.clicked = true
					}
				})
			},
			chengeEmployee(e) {
				let checklist = e.detail.value
				// console.log(checklist)
				_self.setlectTip = '已选择' + checklist.length + '个人'
				_self.employeelist.forEach(function(item) {
					var index = checklist.indexOf(item.userid)
					if (index < 0) {
						item.clicked = false
					} else {
						item.clicked = true
					}
				})
			},
			selectAll() {
				_self.isSelectAll = !_self.isSelectAll
				// console.log(_self.isSelectAll)
				if (_self.isDepart) {
					_self.departmentlist.forEach(function(item) {
						item.clicked = _self.isSelectAll
						_self.setlectTip = `已选择${_self.isSelectAll?_self.departmentlist.length:0}个部门`
					})
				} else {
					_self.employeelist.forEach(function(item) {
						item.clicked = _self.isSelectAll
						_self.setlectTip = `已选择${_self.isSelectAll?_self.employeelist.length:0}个人`
					})
				}
			},
			nextDepart(index) {
				// uni.navigateTo({
				// 	url:'../../contacts/contacts?data='+
				// })
				_self.isDepart = false
				_self.employeelist = _self.departmentlist[index].employeelist
				let title = {
					name: _self.departmentlist[index].departname
				}
				if (_self.departmentlist[index].childDepartment.length > 0) {
					
				}
				_self.titlelist.push(title)
			},
			titleClick(index) {
				_self.isSelectAll = false;
				_self.isDepart = true
				_self.titlelist.splice(index + 1, 1)
			},
			submit(e) {
				// console.log(e.detail.value)
			}
		},
	}
</script>

<style>
	.padding-left {
		padding-left: 25upx;
	}

	.border-left {
		border-left: 1upx solid #dbdbdb;
		padding: 0upx 25upx;
	}

	button::after {
		border: none;
	}

	.bottom-float {
		bottom: 0;
		width: 100%;
		position: fixed;
	}
</style>
